<template>
  <div class="home-monitor-page">
    <!--数据统计 start-->
    <div class="statistical">
      <div v-for="item in state.data" :key="item.id" class="date-item">
        <span class="title">{{ item.label }}</span>
        <div>
          <span>{{ item.count || 0 }}</span>
          <icon :size="80" :type="item.icon"/>
        </div>
        <div style="display: none">
          <span></span>
          <span>今日{{ item.status === -1 ? '减少' : '增加' }}{{ item.diffCount || 0 }}</span>
        </div>
      </div>
    </div>
    <!--数据统计 end-->
    <div class="table-content">
      <!--报警情况表格 start-->
      <div class="dynamic-table-list">
        <DynamicTable
            ref="dynamicTableRef"
            @click="callBack"
            :columns="early"
            :table="state.early.table"
            :data="state.early.data"
        >
          <template #header>报警情况</template>
        </DynamicTable>
      </div>
      <!--报警情况表格 end-->
      <!--设备工况表格 start-->
      <div class="dynamic-table-list">
        <DynamicTable
            ref="dynamicTableDeviceRef"
            @click="callBackDevice"
            :columns="device"
            :table="state.device.table"
            :data="state.device.data"
            row-key="id"
        >
          <template #header>设备工况</template>
        </DynamicTable>
      </div>
      <!--设备工况表格 end-->
    </div>
    <DynamicDialog ref="dynamicDialogRef" @click="callBack" :dialogVisible="state.dialogVisible" :button="state.button"
                   title="预警处理" width="50%">
      <template #dialog>
        <DynamicForm ref="dynamicFormRef" v-if="state.dialogVisible" @click="callBack" :refresh="state.refresh" :rulesForm="state.rulesForm"
                     :rules="state.rules"
                     width="500px"/>
      </template>
    </DynamicDialog>
  </div>
</template>

<script setup lang="ts">

import {nextTick, onMounted, reactive, ref} from 'vue';
import {deviceColumns, earlyColumn} from '@/assets/script/monitor/columns/home'
import {IconFont} from "@/components/iconfont";
import DynamicTable from '@/components/layout/table/dynamic-table.vue'
import DynamicForm from '@/components/layout/form/dynamic-form.vue'
import DynamicDialog from '@/components/layout/dialog/dynamic-dialog.vue'
import {earlyHandleApi, findDeviceStatisticsApi, listDeviceEarlyPageApi} from '@/api/lms'
import {rules, rulesForm} from '@/assets/script/monitor/forms/home/early-proces-from';
import {ElMessage} from "element-plus";

const dynamicTableRef = ref(DynamicTable)
const dynamicTableDeviceRef = ref(DynamicTable)
const dynamicDialogRef = ref(DynamicDialog)
const dynamicFormRef = ref(DynamicForm)

const icon = IconFont
const early = earlyColumn
const device = deviceColumns

/**
 * 统计数据
 * */
const state = reactive({
  data: [
    {
      id: '1',
      label: '设备总数',
      count: '--',
      icon: 'icon-a-zu1993',
      status: 1,
      diffCount: 523,
    },
    {
      id: '2',
      label: '在线设备数',
      count: '--',
      icon: 'icon-a-zu2251',
      status: 1,
      diffCount: 11,
    },
    {
      id: '3',
      label: '离线设备数',
      count: '--',
      icon: 'icon-a-zu2252',
      status: 1,
      diffCount: 91,
    },
    {
      id: '4',
      label: '设备异常数',
      count: '--',
      icon: 'icon-a-zu2253',
      status: 1,
      diffCount: 51,
    },
    {
      id: '5',
      label: '床位总数',
      count: '--',
      icon: 'icon-a-zu2257',
      status: 1,
      diffCount: 98,
    },
    {
      id: '6',
      label: '使用中床位数',
      count: '--',
      icon: 'icon-a-zu2256',
      status: 1,
      diffCount: 56,
    },
    {
      id: '7',
      label: '空置床位数',
      count: '--',
      icon: 'icon-a-zu2255',
      status: 1,
      diffCount: 22,
    },
    {
      id: '8',
      label: '生命体征异常数',
      count: '--',
      icon: 'icon-a-zu2254',
      status: 1,
      diffCount: 52,
    },
  ] as any,
  handleData: {} as any,
  early: {
    data: [] as any,
    table: {
      total: 0,
      pageIndex: 1,
      pageSize: 15
    },
  },
  device: {
    data: [] as any,
    table: {
      total: 0,
      pageIndex: 1,
      pageSize: 15
    },
  },
  dialogVisible: false,
  button: {
    cancel: false,
    confirm: false,
  },
  rulesForm: [] as any,
  rules: rules,
  refresh: 0
});

/**
 * 数据统计
 */
const findDeviceStatistics = () => {
  findDeviceStatisticsApi({}).then(item => {
    let data = state.data.find((f: any) => f.id === '5')
    data.count = item.bedTotal
    data = state.data.find((f: any) => f.id === '6')
    data.count = item.inBedCount
    data = state.data.find((f: any) => f.id === '7')
    data.count = item.emptyCount
    data = state.data.find((f: any) => f.id === '1')
    data.count = item.deviceQuantity
    data = state.data.find((f: any) => f.id === '2')
    data.count = item.onLinQuantity
    data = state.data.find((f: any) => f.id === '3')
    data.count = item.offLinQuantity
    data = state.data.find((f: any) => f.id === '4')
    data.count = item.deviceAbnormalQuantity
    data = state.data.find((f: any) => f.id === '8')
    data.count = item.signAbnormalQuantity
  })
}

const listDeviceEarlyPage = (type = 'early', pageIndex = 1) => {
  let stateType = state[type]
  const params = {
    'alarmTypeList': type === 'early' ? [1, 2, 3, 4, 41, 5, 51, 6, 61, 71, 80, 103, 110, 111, 120, 122, 121, 123] :
        [30, 31, 1030, 60, 384, 50, 989, 988, 40, 963, 940, 939, 941, 935, 936, 7006, 7007, 1300, 1301, 7000, 7001, 7002, 7003],
    pageSize: stateType.table.pageSize,
    pageIndex: pageIndex,
    status: 0
  }
  listDeviceEarlyPageApi(params).then((data) => {
    if (data.code === 0) {
      stateType.table.total = data.total
      stateType.table.pageIndex = data.pageIndex
      stateType.data = data.data
      console.log('listDeviceEarlyPageApi', state)
    }
  })
}
const earlyHandle = (values: any) => {
  values['id'] = state.handleData.id as any
  values['deviceCode'] = state.handleData.deviceCode as any
  values['alarmType'] = state.handleData.alarmType as any
  values['deviceType'] = state.handleData.deviceType as any
  values['olderId'] = state.handleData.olderId as any
  if (!values['enclosure']) {
    values['enclosure'] = []
  }
  earlyHandleApi(values).then(r => {
    if (r.code === 0) {
      listDeviceEarlyPage();
      listDeviceEarlyPage('device')
      ElMessage.success('处理成功！')
    } else {
      ElMessage.warning('处理失败！')
      console.log(r)
    }
  })
}
const callBack = (data: any) => {
  switch (data.type || '') {
    case 'dialogClose':
      state.dialogVisible = false
      break
    case 'submit':
      console.log(data)
      earlyHandle(data.data)
      state.dialogVisible = false
      break
    case 'handle':
      console.log('handle', data)
      state.rulesForm = JSON.parse(JSON.stringify(rulesForm))
      state.refresh = Math.random()
      state.handleData = data.data
      state.dialogVisible = true
      break
    case 'page':
      listDeviceEarlyPage(undefined, data.data)
      break
    case 'pageSize':
      state.early.table.pageSize = data.data
      listDeviceEarlyPage()
      break
    default:
      console.log('callBack', data)
      break
  }
}
const callBackDevice = (data: any) => {
  switch (data.type || '') {
    case 'handle':
      state.rulesForm = JSON.parse(JSON.stringify(rulesForm))
      state.refresh = Math.random()
      state.handleData = data.data
      state.dialogVisible = true
      break
    case 'page':
      listDeviceEarlyPage('device', data.data)
      break
    case 'pageSize':
      state.device.table.pageSize = data.data
      listDeviceEarlyPage('device')
      break
    default:
      console.log('callBack', data)
      break
  }
}

onMounted(() => {
  nextTick(() => {
    findDeviceStatistics();
    listDeviceEarlyPage();
    listDeviceEarlyPage('device')
  })
})
</script>